<template>
  <div v-loading="loading" class="app-container">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item name="1">
        <template slot="title">
          <i class="el-icon-search" />搜索栏
        </template>
        <div class="head-container">
          <el-form class="searchform" :model="params" :inline="true" size="mini" label-width="auto">
            <el-form-item label="提交人ID">
              <el-input v-model="params.submitUserId" placeholder="输入搜索" clearable style="width: 200px;" size="mini" />
            </el-form-item>
            <el-form-item label="采购ID">
              <el-input v-model="params.auditBuyerId" placeholder="输入搜索" clearable style="width: 200px;" size="mini" />
            </el-form-item>
            <el-form-item label="BPMS流水号">
              <el-input v-model="params.reqNo" placeholder="模糊搜索" clearable style="width: 200px;" size="mini" />
            </el-form-item>
            <el-form-item label="是否加急">
              <el-select v-model="params.urgentFlag" placeholder="选择搜索" clearable size="mini" style="width: 200px">
                <el-option key="Y" label="Y" value="Y" />
                <el-option key="N" label="N" value="N" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" style="float:right;margin-left:0px;" type="primary" icon="el-icon-refresh" round @click="resetForm">重置</el-button>
              <el-button size="mini" style="float:right;margin-left:0px;" type="primary" icon="el-icon-search" round @click="toQuery">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-collapse-item>
    </el-collapse>
    <div style="padding-top:0px">
      <el-table ref="itemTab" :data="data" stripe size="small" border style="width: 100%;" @header-dragend="colChange" @sort-change="sortChange">
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="提交人ID" prop="submitUserId" :width="colWidths.submitUserId" />
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="采购ID" prop="auditBuyerId" :width="colWidths.auditBuyerId" />
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="流水号" prop="reqNo" :width="colWidths.reqNo" />
        <el-table-column :show-overflow-tooltip="true" sortable="custom" label="是否加急" prop="urgentFlag" :width="colWidths.urgentFlag" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" @click="doUrgentHandle(scope.row.batchRecordId)">紧急出号</el-button>
            <el-button size="mini" type="warning" @click="toInfo(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <el-pagination
        :total="total"
        :current-page.sync="currentPage"
        :page-sizes="[10,50,100,500]"
        style="margin-top: 8px;"
        layout="total, prev, pager, next, sizes"
        @size-change="sizeChange"
        @current-change="pageChange"
      />
    </div>
    <newItemForm ref="newItemForm" :parent="parent" />
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
import initData from '@/utils/initData'
import { Message } from 'element-ui'
import { urgentHandle } from '@/api/new-item'
import newItemForm from './newItemList'

export default {
  components: { newItemForm },
  mixins: [initData],
  data() {
    return {
      loading: false,
      activeName: '1',
      parent: this
    }
  },
  methods: {
    parseTime,
    beforeInit() {
      this.url = '/batch/urgentHandleList'
      this.params.pageNum = this.page
      this.params.pageSize = this.size
      return true
    },
    // 列表排序触发
    sortChange(val) {
      let sortType = ''
      if (val.order === 'descending') {
        sortType = ' DESC'
      } else if (val.order === 'ascending') {
        sortType = ' ASC'
      }
      this.params.sort = val.prop + sortType
      this.init()
    },
    // 查询
    toQuery() {
      this.page = 0
      this.currentPage = 1
      this.init()
    },
    // 查询栏重置触发
    resetForm() {
      this.syncTime = []
      this.params = {}
    },
    // 紧急处理
    doUrgentHandle(batchRecordId) {
      this.$confirm('确认紧急出号该批商品？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        urgentHandle(batchRecordId).then(res => {
          this.toQuery()
          Message({
            message: '处理完成。',
            type: 'success',
            duration: 3 * 1000
          })
          this.loading = false
        }, error => {
          console.log(error)
          this.loading = false
        })
      })
    },
    // 打开审核详情页
    toInfo(obj) {
      var _form = null
      if (obj.recordType === 0) {
        _form = this.$refs.newItemForm
        _form.colWidthKey = this.$route.name + 'newItemForm'
      } else if (obj.recordType === 5) {
        _form = this.$refs.activeForm
        _form.colWidthKey = this.$route.name + 'activeForm'
      } else if (obj.recordType === 1) {
        _form = this.$refs.fieldForm
        _form.colWidthKey = this.$route.name + 'fieldForm'
      }
      _form.getTableColWidth()
      _form.batchRecordId = obj.batchRecordId
      _form.toQuery()
      _form.dialog = true
    }
  }
}
</script>
